<template lang="html">
  <div>
    <selfHeader></selfHeader>

    <div class="main">
      <div class="activeBox">
        <span @click="tab(1)" :class="activeTab === 1 ? 'activeChoose' : ''">未支付</span>
        <span @click="tab(2)" :class="activeTab === 2 ? 'activeChoose' : ''">待发货</span>
        <span @click="tab(3)" :class="activeTab === 3 ? 'activeChoose' : ''">待收货</span>
        <span @click="tab(4)" :class="activeTab === 4 ? 'activeChoose' : ''">已收货</span>
      </div>

      <div v-if="list.length > 0" class="listBox">
        <div v-for="(item, index) in list" :key="index" class="orderList">
          <div class="contentBox">
            <img :src="item.image" alt="">
            <div class="price">
              <b>
                <i>￥{{ item.totalPrice.toFixed(2) }}</i>
                <i>茶籽数量: {{ item.teaSeedNum }}</i>
              </b>
              <span>{{ item.storeName }}</span>
            </div>
          </div>
          <div class="addressBox">
            <span>{{ item.realName }}</span>
            <span>{{ item.userPhone }}</span>
          </div>
          <span>收款账号: {{alipayConfig.alipayNum}}</span>
          <div class="addressBox">
            <img src="../assets/location.png" alt="">
            <span>{{ item.userAddress }}</span>
          </div>
          <div class='btnBox' v-if='activeTab === 1'>
            <Button  type="primary" class='self_btn' @click='moveTo(item)'> 去支付 </Button>
            <Button type="danger"  class='self_btn' @click='remove(item)'> 删除 </Button>
          </div>
          <input style='display: none' ref="filElem" type="file" class="upload-file" @change="previewFile">
        </div>
      </div>
      <is-empty v-else></is-empty>
    </div>
  </div>
</template>

<script>
import {TabContainer, TabContainerItem, Button} from 'mint-ui';
import {goodMyCat, orderDelete, orderUpdate} from '@/http/api'
import selfHeader from '@/common/header'
import isEmpty from '../components/isEmpty';

export default {
  components: {
    TabContainer,
    TabContainerItem,
    selfHeader,
    isEmpty,
    Button
  },
  data() {
    return {
      active: '1',
      activeTab: 1,
      list: [],
      user: {},
      paid: '',
      uploadId: '',
      alipayConfig: {}
    }
  },
  created() {
    const {paid, status} = this.$route.query
    const user = JSON.parse(localStorage.getItem('UserMessage'))
    this.paid = paid * 1 || 0
    this.user = user
    const data = {
      uid: user.user.uid,
      paid: paid * 1 || 0,
      status: paid * 1 === 0 ? null : status * 1
    }

    if (paid * 1 === 0) {
      this.activeTab = 1
    } else {
      if (status * 1 === 1) {
        this.activeTab = 3
      }
      if (status * 1 === 2) {
        this.activeTab = 4
      }
    }
    this.getList(data)
  },
  methods: {
    upload (item) {
      this.uploadId = item.id
      this.$refs.filElem[0].click()
    },
    previewFile () {
      const file = this.$refs.filElem[0].files[0];
      // var reader = new FileReader();
        const formData = new FormData()
        formData.append('file', file)
        const xhr = new XMLHttpRequest()
        let that = this
        xhr.onreadystatechange = function () {
          const result = JSON.parse(xhr.responseText)
          let dataUrl = result.data.path
          if (dataUrl) {
            that.orderUp(dataUrl)
          }
        }
        xhr.open('POST', 'http://114.55.102.36:8809/api/shared/upload/image', true)
        xhr.send(formData)
    },
    async orderUp(dataUrl) {
      const data = {
        id: this.uploadId,
        payImage: dataUrl
      }
      console.log(data)
      const res = await orderUpdate(data)
      this.tab(this.activeTab)
    },
    async remove (item) {
      const data = {
        id: item.id
      }

      const res = await orderDelete(data)
      const parmas = {
        uid: this.user.user.uid,
        paid: this.paid,
        status: this.activeTab
      }
      this.tab(this.activeTab)
    },
    async getList(data) {
      const res = await goodMyCat(data)
      this.list = res.data.orderList
      this.alipayConfig = res.data.alipayConfig
    },
    tab(index) {
      this.activeTab = index * 1
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      let data = {
        uid: user.user.uid
      }
      switch (index * 1) {
        case 1:
          data.paid = 0
          break
        case 2:
          data.paid = 1
          data.status = 0
          break
        case 3:
          data.paid = 1
          data.status = 1
          break
        case 4:
          data.paid = 1
          data.status = 2
          break
      }
      this.getList(data)
    },
    moveTo (item) {
      this.$router.push({
        path: '/paySure',
        query: {
          type: 'order',
          aliplayName: this.alipayConfig.alipayNum,
          image: this.alipayConfig.image,
          id: item.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.main {
  width: 100%;
  padding-top: 60px;
  background-color: #f5f5f5;
}

.activeBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  padding-bottom: 2px;

  .activeChoose {
    color: #048AB9;
    border-bottom: 2px solid #048AB9;
    font-weight: 600;
  }
}

.orderList {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #048AB9;
  border-radius: 6px;
  overflow: hidden;
  padding: 6px;

  .contentBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    img {
      width: 40%;
      height: 80px;
    }

    div {
      width: 55%;
      display: block;
    }
  }

  .addressBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;

    img {
      width: 13px;
      height: 13px;
    }

    span:first-child {
      font-size: 15px;
      width: 30%;
      display: block;
      font-weight: 600;
    }
    spam:last-child {
      font-size: 13px;
      color: #8a8a8a;
    }
  }
}

.listBox {
  padding: 0 10px;
}

.price {
  font-weight: normal;
  margin-top: 10px;
  span {
    font-weight: 600;
    margin-top: 6px;
    display: block;
  }
  b {
    font-weight: normal;
    i {
      display: block;
    }
  }
  i:first-child {
    color: #4caf50;
    font-size: 20px;
  }
  i:last-child{
    color: #4caf50;
    font-size: 13px;
    padding-left: 8px;
  }
}
.self_btn {
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
}
.btnBox {
  padding-top: 4px;
  margin-top: 4px;
    border-top: 1px solid #048AB9;
  display: flex;
  justify-content: flex-end;
}
</style>
